<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>searchDetaile</title>
  <link rel="stylesheet" href="../css/toggle.css">
  <link rel="stylesheet" href="../css/style.css">
  <script src="../js/jquery.min.js"></script>
  <script src="../js/juicer.js"></script>
  <style>
    @media screen and (max-width: 1466px) {
      table {
        border: 1px dotted #0099CC!important;
      }

      table thead {
        display: none;
      }

      table tr {
        display: block;
      }

      table td {
        display: block;
        text-align: right;
        font-size: 13px;
        padding: 8px;
        line-height: 20px;
        border-bottom: 1px dotted #0099CC;
        ;
      }

      table td.left {
        text-align: left;
      }

      table td:last-child {
        border-bottom: 0;
      }

      table td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
      }
      table td:after {
        content: '.';
        display: inline-block;
        color: rgba(0, 0, 0, 0);
      }

      .sub-list li:first-child:before {
        content: "\A";
        white-space: pre
      }
    }

    .main {
      padding: .5em;
    }
  </style>
</head>

<body>
  <div id="wrapper">
    <!--   Sidebar -->
    <div id='aside'>
      <%include ./common/aside.ejs%>
    </div>
    <!--   contens -->
    <div class="upload">
      <!-- header -->
      <div id='header'>
        <%include ./common/headerSearch.ejs%>
      </div>
      <!-- shadow -->
      <div class="items-shodow" style="display:none">
      </div>
      <!-- midd contents -->
      <div class="searchSick container">
        <div class="row headerSearch">
          <div class="pull-right col-md-6 col-xs-12 search-wrap">
            <button class="pull-right searchBtn">搜索</button>
            <input type="text" name="" class="pull-right form-control" placeholder="请在此输入症状">
          </div>
        </div>
        <div class="main" id="hi">
          <div class="table_detail">
            <table class="table">
              <tr>
                <td data-label="【综合症中文名】">
                  <%=docs[0]%>
                </td>
                <td data-label="【中文别名】">
                  <%=docs[1]%>
                </td>
                <td data-label="【中文别名1】">
                  <%=docs[2]%>
                </td>
                <td data-label="【中文别名2】">
                  <%=docs[3]%>
                </td>
                <td data-label="【OMIM】">
                  <%=docs[4]%>
                </td>
                <td data-label="【英文全名】">
                  <%=docs[5]%>
                </td>
                <td data-label="【英文别名】">
                  <%=docs[6]%>
                </td>
                <td data-label="【英文别名1】">
                  <%=docs[7]%>
                </td>
                <td data-label="【英文别名2】">
                  <%=docs[8]%>
                </td>
                <td data-label="【英文缩写】">
                  <%=docs[9]%>
                </td>
                <td data-label="【英文缩写2】">
                  <%=docs[10]%>
                </td>
                <td data-label="【英文缩写3】">
                  <%=docs[11]%>
                </td>
                <td data-label="【好发年龄】">
                  <%=docs[12]%>
                </td>
                <td data-label="【遗传方式】">
                  <%=docs[13]%>
                </td>
                <td class="left" data-label="【病因】">
                  <%=docs[14]%>
                </td>
                <td class="left" data-label="【临床表现】">
                  <%=docs[15]%>
                </td>
                <td class="left" data-label="【临床表现】">
                  <%=docs[16]%>
                </td>
                <td class="left" data-label="【特征表现】">
                  <ul class="sub-list">
                    <% docs[17].forEach(function(key){ %>
                      <li>
                        <%=key%>
                      </li>
                      <%})%>
                  </ul>

                </td>
              </tr>
            </table>
          </div>

        </div>
      </div>
      <!-- footer -->
      <div id='footer'>
        <%include ./common/footer.ejs%>
      </div>
    </div>
  </div>
  <script src="../js/bootstrap.min.js"></script>
  <script id="tpl" type="text/template">
    {@each list as item,index}
    <table class="table-responsive">
      <tbody id="tbd">
        <tr>
          {@each item as v,k} {@if v==''}${v}&nbsp;{@/if}{@/each}
          <td data-label="【综合症中文名】">${item[0]}</td>
          <td data-label="【中文别名】">${item[1]}</td>
          <td data-label="【中文别名1】">${item[2]}</td>
          <td data-label="【中文别名2】">${item[3]}</td>
          <td data-label="【OMIM】">${item[4]}</td>
          <td data-label="【英文全名】">${item[5]}</td>
          <td data-label="【英文别名】">${item[6]}</td>
          <td data-label="【英文别名1】">${item[7]}</td>
          <td data-label="【英文别名2】">${item[8]}</td>
          <td data-label="【英文缩写】">${item[9]}</td>
          <td data-label="【英文缩写2】">${item[10]}</td>
          <td data-label="【英文缩写3】">${item[11]}</td>
          <td data-label="【好发年龄】">${item[12]}</td>
          <td data-label="【遗传方式】">${item[13]}</td>
          <td class="left" data-label="【病因】">${item[14]}</td>
          <td class="left" data-label="【临床表现】">${item[15]}</td>
          <td class="left" data-label="【临床表现】">${item[15]}</td>
          <td class="left" data-label="【特征表现】">
            <ul class="sub-list">{@each item[17] as vs,ks}
              <li>${vs}</li>{@/each}</ul>
          </td>
        </tr>
        <!--   <tr>
        {@each item as v,k}
                  <td data-label=${title[k]}>
                    ${v}{@if v==''} ${v}&nbsp;{@/if}{@if v.constructor==Array}
                    <ul>{@each v as vs,ks}
          <li>${vs}</li>{@/each}{@/if}</ul>
                  </td>
                  {@/each}

          <td data-label="【综合症中文名】">${item[0]}</td>
        <td data-label="【中文别名】">${item[1]}</td>
        <td data-label="【中文别名1】">${item[2]}</td>
        <td data-label="【中文别名2】">${item[3]}</td>
        <td data-label="【OMIM】">${item[4]}</td>
        <td data-label="【英文全名】">${item[5]}</td>
        <td data-label="【英文别名】">${item[6]}</td>
        <td data-label="【英文别名1】">${item[7]}</td>
        <td data-label="【英文别名2】">${item[8]}</td>
        <td data-label="【英文缩写】">${item[9]}</td>
        <td data-label="【英文缩写2】">${item[10]}</td>
        <td data-label="【英文缩写3】">${item[11]}</td>
        <td data-label="【好发年龄】">${item[12]}</td>
        <td data-label="【遗传方式】">${item[13]}</td>
        <td class="left" data-label="【病因】">${item[14]}</td>
        <td class="left" data-label="【临床表现】">${item[15]}</td>
        <td class="left" data-label="【临床表现】">${item[15]}</td>
        <td class="left" data-label="【特征表现】">
          <ul>{@each item[17] as vs,ks}
            <li>${vs}</li>{@/each}</ul>
        </td>
      </tr> -->
      </tbody>
    </table>
    <div style="width:100%;height:100px;"></div>
    {@/each}
  </script>
  <script type="text/javascript">
    $('#btn').on('click', function() {
      var search_value = $("#search_value").val();
      $.get('http://localhost:3004/id', function(data) {
        var tpl = document.getElementById("tpl").innerHTML;
        console.log(data);
        var html = juicer(tpl, data); //得到渲染结果，需要放到DOM元素中才能在页面中显示
        document.getElementById('hi').innerHTML = html;
      });
    })
  </script>
</body>

</html>
